<template>
  <div class="box6">
    <div class="title">
      <p>热门景区排行</p>
      <img src="../images/dataScreen-title.png" alt="" />
    </div>
    <!-- 图形图标的容器 -->
    <div class="charts" ref="charts"></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { ref, onMounted } from 'vue'
//获取DOM节点
let charts = ref()
let result = [
  { name: '峨眉山', value: 259876, label: '1' },
  { name: '昆仑山', value: 151235, label: '2' },
  { name: '九寨沟', value: 85224, label: '3' },
  { name: '万里长城', value: 65332, label: '4' },
  { name: '北京故宫', value: 45254, label: '5' },
]
//组件挂载完毕
onMounted(() => {
  //一个容器可以同时展示多种类型的图形图标
  let mychart = echarts.init(charts.value)
  //设置配置项
  mychart.setOption({
    tooltip: {
      show: true,
      trigger: 'item',
      padding: [8, 15],
      backgroundColor: 'rgba(12, 51, 115,0.8)',
      borderColor: 'rgba(3, 11, 44, 0.5)',
      textStyle: {
        color: 'rgba(255, 255, 255, 1)',
      },
    },
    legend: {
      show: false,
    },
    grid: {
      left: '100',
      right: '16%',
      top: '15%',
      bottom: '8%',
    },
    xAxis: [
      {
        splitLine: {
          show: false,
        },
        type: 'value',
        show: false,
      },
    ],
    yAxis: [
      {
        type: 'category',
        inverse: true,
        offset: 70,
        position: 'left',
        axisLabel: {
          show: true,
          align: 'left',
          textStyle: {
            color: '#fff',
            fontSize: 14,
          },
          formatter: function (_:any, index : number) {
            var str = ''
            str = '{name|' + result[index].name + '}'
            return str
          },
          rich: {
            name: { color: '#fff', fontSize: 14, padding: [40, 130, 2, 80] },
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        data: result.map((item) => item.name),
      },
      {
        type: 'category',
        inverse: true,
        axisTick: 'none',
        axisLine: 'none',
        show: true,
        axisLabel: {
          align: 'left',
          textStyle: {
            color: '#fff',
            fontSize: 12,
          },
          formatter: function (_:any, index:number) {
            var str = ''
            str = '{name|' + result[index].value + '}'
            return str
          },
          rich: {
            name: { color: '#fff', fontSize: 14, padding: [40, 0, 2, 0] },
          },
        },
        data: result.map((item) => item.value),
      },
    ],
    series: [
      {
        label: {
          show: true,
          position: 'left',
          distance: 10,
          formatter: function (params :any) {
            return 'NO.' + params.data.label
          }, // 使用数据项的名称作为标题
          textStyle: {
            color: '#fff',
            fontSize: 16,
          },
        },
        name: '景区排行',
        type: 'bar',
        barWidth: 10, // 柱子宽度
        MaxSize: 0,
        showBackground: true,
        backgroundStyle: {
          color: 'rgba(79, 98, 114, 0.6)',
        },
        data: result.map((item) => {
          return {
            name: item.name,
            value: item.value,
            label: item.label,
            itemStyle: {
              color: {
                x: 1,
                y: 0,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 0,
                    color: '#1CEBA0', // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: '#11CDEB', // 100% 处的颜色
                  },
                ],
              },
              borderRadius: 0,
            },
          }
        }),
      },
      {
        name: '外圆',
        type: 'scatter',
        emphasis: {
          scale: false,
        },
        symbol: 'rect',
        symbolSize: [5, 16],
        itemStyle: {
          color: '#FFF',
          shadowColor: 'rgba(255, 255, 255, 0.5)',
          shadowBlur: 5,
          borderWidth: 1,
          opacity: 1,
        },
        z: 2,
        data: result,
        animationDelay: 500,
      },
    ],
  })
})
</script>

<style scoped lang="scss">
.box6 {
  width: 100%;
  height: 100%;
  background: url(../images/dataScreen-main-cb.png) no-repeat;
  background-size: 100% 100%;
  margin: 20px 0px;

  .title {
    margin-left: 5px;

    p {
      color: white;
      font-size: 20px;
    }
  }

  .charts {
    height: calc(100% - 30px);
  }
}
</style>
